<template>
  <div>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      :data="tableData"
      height="400"
      border
      style="width: 100%">
      <el-table-column
        label="歌曲图片"
        width="100">
        <template slot-scope="scope">
          <div style="position: relative;">
            <el-avatar :class="[getIsCurPlayMusic(scope.row)?'applogo':'']" :size="60" :src="scope.row.imageUrl">
              {{ getIsCurPlayMusic(scope.row) }}
            </el-avatar>
            <div style="position: absolute;right:0;top:30%;">
              <i v-if="!getIsCurPlayMusic(scope.row)" class="el-icon-video-pause" @click="playCur(scope.row)"></i>
              <i v-else class="el-icon-video-play"></i>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="姓名"
        width="180">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            @keydown.enter.native="getist"
            placeholder="输入歌手/歌名搜索"/>
        </template>
        <template slot-scope="scope">
          {{ scope.row.nickname }}-{{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column
        label="歌曲类型">
        <template slot-scope="scope">
          {{ getStyleNameById(scope.row.type) }}
        </template>
      </el-table-column>
      <el-table-column
        label="歌曲语言">
        <template slot-scope="scope">
          {{ scope.row.language ? scope.row.language : '未知' }}
        </template>
      </el-table-column>
<!--      prop="songDescription"-->
      <el-table-column
        label="歌曲描述">
        <template slot-scope="scope">
          <el-input
            type="textarea"
            :rows="2"
            :readonly="true"
            placeholder="请输入内容"
            v-model="scope.row.songDescription">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot="header" slot-scope="scope">
          <span style="margin-right: 20px;">操作</span>
          <el-button @click="addSong" type="text" size="small">添加</el-button>
        </template>
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看歌词</el-button>
          <el-button @click="songEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="songDelete(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row style="margin-top: 10px;">
      <el-col :span="12" :offset="10">
        <el-button v-if="hasValue" type="mini" :loading="searchFlag" @click="searchSongEnter">
          {{ searchFlag ? '加载中' : '加载更多' }}
        </el-button>
        <el-button v-else type="mini" :loading="searchFlag">
          没有更多了
        </el-button>
      </el-col>
    </el-row>

    <ShowLyric ref="ShowLyric"></ShowLyric>

    <div style="position:absolute;bottom: 0;right: 10%;left: 10%;">
      <div style="margin-left: 50%">
        <div style="display: flex;flex-direction: column" v-if="!showPlay">
          <i class="el-icon-caret-top" @click="showPlay = true"></i>
        </div>

        <div style="display: flex;flex-direction: column" v-else>
          <i class="el-icon-caret-bottom" @click="showPlay = false"></i>
        </div>
      </div>
      <div v-show="showPlay">
        <aplayer :autoplay="false"
                 :showLrc="true"
                 :music="getCurMusic"/>
      </div>
    </div>

  </div>
</template>


<script>

import ShowLyric from '../song/showlyric'
import {mapGetters} from "vuex";
import Aplayer from 'vue-aplayer'


export default {
  components: {ShowLyric, Aplayer},
  name: "SongInfo",
  data() {
    return {
      loading: false, //是否正在加载中
      showPlay: false,
      styleList: [], // 歌曲风格集合
      search: '', // 搜索值
      queryParams: {
        blur: '', // 根据歌手或者歌手名进行查询
        total: 0,
        pageNum: 1,
        pageSize: 2
      },
      hasValue: true, // 是否还有值
      searchFlag: false, // 是否正在查询，loading
      tableData: []  // 歌曲数据集合
    }
  },
  computed: {
    getCurMusic() {
      return this.$store.getters.getCurrentMusic;
    },
    ...mapGetters['music']
  },
  mounted() {
    this.queryListStyle();
    this.queryListSong();
  },
  methods: {
    playCur(row) {
      let music = {
        songId: row.songId,
        title: row.name,
        artist: row.nickname,
        src: row.songUrl,
        pic: row.imageUrl,
        lrc: row.lyric
      }

      this.$store.commit('setCurrentMusic', music)
    },

    /*判断当前是不是播放的歌曲id*/
    getIsCurPlayMusic(row) {
      return row.songId == this.getCurMusic.songId;
    },
    /*  根据风格id获取风格名字*/
    getStyleNameById(id) {
      let name = '未知';
      this.styleList.forEach(e => {
        if (e.styleId == id) {
          name = e.styleName;
        }
      })
      return name;
    },

    /*查询歌曲*/
    getist() {
      this.loading = true;
      this.tableData = [];
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 2;
      this.searchSongEnter();
    },

    /*回车进行关键词搜索*/
    searchSongEnter() {
      console.log("回车了");
      this.hasValue = true;
      this.searchFlag = true;
      this.queryListSong();
    },

    /*分页查询歌曲*/
    queryListSong() {
      this.loading = true;
      this.queryParams.blur = this.search;
      this.$axios.get(`/sys/song`, {
        params: {
          ...this.queryParams
        }
      }).then((res) => {
        this.loading = false;
        this.searchFlag = false;
        let pageData = res.data.data
        // console.log(pageData)
        console.log("分页查询");
        console.log(res.data.data)
        this.queryParams.pageNum = pageData.pageNum;
        this.queryParams.pageSize = pageData.pageSize;
        this.tableData = this.tableData.concat(...pageData.list)
        if (pageData.list.length == 0) {
          this.hasValue = false;
        } else {
          this.queryParams.pageNum++;
        }
        console.log(this.queryParams.pageNum);

      }).catch((err) => {
        this.loading = false;
      })
    },

    /*显示歌词*/
    handleClick(row) {
      this.$refs.ShowLyric.drawer = true;
      this.$refs.ShowLyric.lyric = row.lyric;
    },

    /*添加歌曲*/
    addSong() {
      this.$axios.get('/sys/style')
        .then((res) => {
          let styleList = res.data.data
          this.$router.push({name: 'SongAdd', params: {styleList: styleList}},);
        })
    },

    /*编辑歌曲*/
    songEdit(row) {
      this.$router.push({name: 'SongEdit',params: {songId:row.songId}});
    },

    /*查询所有风格*/
    queryListStyle() {
      this.$axios.get('/sys/style')
        .then((res) => {
          this.styleList = res.data.data;
        })
    },

    /*删除歌曲*/
    songDelete(row) {
      this.$confirm('此操作将永久删除"' + row.nickname + "-" + row.name + '"风格, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get('/SongServlet?method=deleteById', {params: {id: row.songId}})
          .then((res) => {
            this.$message({
              type: 'success',
              message: `删除歌曲${row.nickname + "-" + row.name}成功`
            });
            this.getist();
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>
.el-form {
  margin-top: 10px;
}

/*转圈圈*/
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .applogo {
    animation: App-logo-spin infinite 10s linear;
  }
}
</style>
